<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局练习</title>
    <style>
        body,
        html {
            padding: 0px;
            margin: 0px;
            height: 100%;
            background-image: url('../../assets/sunrise.JPG');
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
        }

        header {
            background-color: black;
            color: white;
            display: flex;
            height: 40px;
            flex-flow: row nowrap;
            justify-content: space-between;
        }

        header .logo {
            flex-basis: 100px;
            background-color: red;

            display: flex;
            flex-flow: row nowrap;
            height: 100%;
            justify-content: center;
            align-items: center;
        }

        header nav {
            flex-basis: 400px;

            display: flex;
            flex-flow: row nowrap;
            justify-content: space-evenly;
        }

        nav *:nth-child(n) {
            color: white;
            text-decoration: none;
            cursor: pointer;
            flex-grow: 1;

            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            border-right: 1px solid white;
            margin: 10px 0px;
        }

        nav *:nth-child(n):hover {
            background-color: red;
            border-width: 0px;
            margin: 0px;
            transition: 1;
        }

        .main {
            height: calc(100% - 40px);

            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
        }

        .main section {
            width: 900px;
            height: 200px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            padding: 20px;
            box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.75);
            border-radius: 10px;
        }

        section .item {
            height: 100%;
            border-radius: 10px;
            box-sizing: border-box;
            flex: 0 1 150px;

            box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.75);
            background-color: rgba(255,255,255,.2);
            cursor: pointer;

            display: flex;
            flex-flow: column nowrap;
            justify-content: space-around;
            align-items: center;
        }

        section .item>img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
        }

        section .item>span {
            font-size: 20px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }

        section .item:hover {
            box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.75);
            transition: 0.5;
        }
    </style>
</head>

<body>
    <header>
        <span class="logo">LOGO</span>
        <nav>
            <a href="/1">游戏特色</a>
            <a href="/2">角色情报</a>
            <a href="/3">新闻资讯</a>
            <a href="/4">版本介绍</a>
        </nav>
    </header>
    <div class="main">
        <section>
            <div class="item">
                <img src="../../assets/avaters/avater1.webp" />
                <span>用户1</span>
            </div>
            <div class="item">
                <img src="../../assets/avaters/avater2.webp" />
                <span>用户2</span>
            </div>
            <div class="item">
                <img src="../../assets/avaters/avater3.webp" />
                <span>用户3</span>
            </div>
            <div class="item">
                <img src="../../assets/avaters/avater4.webp" />
                <span>用户4</span>
            </div>
            <div class="item">
                <img src="../../assets/avaters/avater5.webp" />
                <span>用户5</span>
            </div>
        </section>
    </div>
</body>

</html>